<template>
  <div id="personalInfo">
    <header>
      <i @click="goBack()"></i>
      <div>个人信息</div>
    </header>
    <ul class="person">
      <li>
        <a @click="showTip=true">
          <div>
            <img src="../../image/per1.png" alt="">
            <h3>头像</h3>
          </div>
          <div>
            <img :src="userObj.pic?userObj.pic:defaultPic" width="34" height="34" />
            <img src="../../image/icon_gray_next.png" alt="">
          </div>
        </a>
      </li>
      <li>
        <router-link to="/changeNickName">
          <div>
            <img src="../../image/per2.png" alt="">
            <h3>昵称</h3>
          </div>
          <div>
            <b>{{userObj.username?userObj.username:"用户"+userObj.id}}</b>
            <img src="../../image/icon_gray_next.png" alt="">
          </div>

        </router-link>
      </li>
      <li>
        <a>
          <div>

            <img src="../../image/per3.png" alt="">
            <h3>UID</h3>
          </div>

          <i>{{userObj.id}}</i>
        </a>
      </li>
      <li>
        <router-link to='/personalHomePage'>
          <div>
            <img src="../../image/per4.png" alt="">
            <h3>个人主页</h3>
          </div>
          <img src="../../image/icon_gray_next.png" alt="">
        </router-link>
      </li>
    </ul>
    <div class="applicable-container" @click="choseApp(-1)" v-show='showTip'>
      <div class="app-content">
        <ul class="item-nav">
          <li v-for="(item,index) in dataList" @click.stop="choseApp(index)">
            {{item}}
          </li>
        </ul>
        <div class="cancle" @click="choseApp(-1)">取消</div>
      </div>
    </div>
    <!-- <input type="file" name="file" class="camera" accept="image/*" capture="camera" @change="showCamera($event)">
  		<input type="file" name="file" class="photo" @change="showCamera($event)"> -->
    <iframe name="myiframe" width="0" height="0" scrolling="no" style="display: none"></iframe>
    <form id='myupload' :action='$api.baseURLUpload+"/photos/upload_shop"' method='post' enctype='multipart/form-data'
      target="myiframe">
      <input type="file" name="file" class="camera" accept="image/*" capture="camera" @change="upfile">
      <input type="file" name="file" class="photo" @change="upfile">
    </form>
  </div>
</template>
<script>
  import {
    Indicator
  } from 'mint-ui';
  export default {
    data() {
      return {
        dataList: ['从相册选择'],
        defaultPic: require("../../image/icon_doctor@2x_03.png"), //默认头像
        showTip: false,
        userObj: {}, //用户信息
        userid: "",
      }
    },
    components: {

    },
    methods: {
      goBack() {
        this.$router.push({
          path: '/my'
        });
      },
      //根据用户id获取用户信息
      getUserData() {
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "select_cid/user/" + this.userid, {}, r => {
          // console.log(r);
          this.userObj = r.data.info;
        }, err => {
          console.log(err);
        })
      },
      choseApp(index) {
        if (index == 0) {
          // console.log('相册');
          $(".photo").click();
        } else if (index == 1) {
          // console.log("拍照");
          $("input[capture='camera']").click();
        }
        this.showTip = false;
      },
      //以下暂时可以不用
      showCamera(event) {
        var files = event.target.files,
          file;
        var that = this;
        if (files && files.length > 0) {
          file = files[0];
          try {
            var URL = window.URL || window.webkitURL;
            var blob = URL.createObjectURL(file); // 获取照片的文件流
            that.compressPicture(blob); // 压缩照片
            // alert(blob);
          } catch (e) {
            try {
              var fileReader = new FileReader();
              fileReader.onload = function (event) { // 获取照片的base64编码
                alert(event.target.result);
                that.compressPicture(event.target.result); // 压缩照片
              };
              fileReader.readAsDataURL(file);

            } catch (e) {
              alert(common.MESSAGE.title.error, '拍照失败,请联系客服或尝试更换手机再试!');
            }
          }
        }
      },
      //以下暂时可以不用
      compressPicture(blob) {
        var quality = 0.5,
          image = new Image();
        image.src = blob;
        var _this = this;
        image.onload = function () {
          var that = this;
          // 生成比例
          var width = that.width,
            height = that.height;
          width = width / 4;
          height = height / 4;
          // 生成canvas画板
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(that, 0, 0, width, height);
          // 生成base64,兼容修复移动设备需要引入mobileBUGFix.js
          var imgurl = canvas.toDataURL('image/jpeg', quality);
          // 修复IOS兼容问题
          if (navigator.userAgent.match(/iphone/i)) {
            var mpImg = new MegaPixImage(image);
            mpImg.render(canvas, {
              maxWidth: width,
              maxHeight: height,
              quality: quality
            });
            alert(imgurl);
            imgurl = canvas.toDataURL('image/jpeg', quality);
          }
          // 上传照片
          const params = {
            id: _this.userid,
            pic: imgurl,
          };
          _this.changeUserPic(params);
        }
      },
      //修改头像
      changeUserPic(params) {
        this.$api.post(this.$api.baseURLSchool, "updatedata/user/edit", params, r => {
          Indicator.close();
          console.log(r);
          this.getUserData();
        }, err => {
          Indicator.close();
          console.log(err);
        })
      },
      //上传图片
      upfile() {
        var file = event.target.files,
          file;
        file = file[0];
        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
        var _this = this;
        if (file) {
          Indicator.open({
            text: '加载中...',
            spinnerType: 'fading-circle'
          });
          var options = {
            url: this.$api.baseURLUpload + "/photos/upload_shop", //同action
            type: 'post',
            beforeSend: function (xhr) { //请求之前

            },
            uploadProgress: function (event, position, total, percentComplete) {

            },
            success: function (data) {
              if (data.state == 200) {
                console.log(data);
                // 修改头像
                const params = {
                  id: _this.userid,
                  pic: data.result,
                };
                _this.changeUserPic(params);
              }
            },
            error: function (xhr, status, msg) {
              _this.$utils._toast("上传失败");
            }
          };
          $("#myupload").ajaxSubmit(options);
        }


      },
    },
    created() {
      this.getUserData();
    }
  }

</script>
<style lang="scss" scoped>
  .mint-actionsheet {
    width: 345px !important;
    background: none !important;

    .mint-actionsheet-list {
      border-radius: 10px;
      margin-bottom: 9px !important;

      .mint-actionsheet-listitem {
        font-size: 17px !important;
        color: rgba(21, 142, 218, 1) !important;
      }
    }

    .mint-actionsheet-button {
      font-size: 17px !important;
      margin-bottom: 5px !important;
      color: rgba(51, 51, 51, 1) !important;
      border-radius: 10px;
    }
  }

  .applicable-container {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    width: 100%;
    height: 100%;

    .app-content {
      padding: 10px;
      position: fixed;
      bottom: 0px;
      width: 100%;
      left: 0px;
    }

    .item-nav {
      margin-bottom: 8px;
      background-color: #FFF;
      border-radius: 10px;
      padding: 0px 15px;

      li {
        font-size: 16px;
        width: 100%;
        text-align: center;
        padding: 13px 0px;
        border-bottom: 1px solid #EEE;
      }

      li:last-child {
        border-bottom: 0px;
      }
    }

    .cancle {
      padding: 13px 10%;
      font-size: 16px;
      text-align: center;
      background-color: #FFF;
      border-radius: 10px;
    }
  }

  input[capture=camera],
  input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

</style>
